<template >
<view class="goodList">
<!-- 搜索框 -->
<ugo-search ></ugo-search>
<!-- 导航栏 -->
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bar-width="150"  active-color="#eb4450"></u-tabs>

<!-- 商品 -->
<view v-if="current===0">
<view class="goods-content">
<navigator  :url="`/pages/goodsDetail/goodsDetail?goods_id=${item.goods_id}`"
  class="goods-item" 
  v-for="item in goods" 
  :key="item.goods_id"
  >
        <view class="goods-image">
            <!--u-image  配置图片的width宽和height高，以及src路径即可使用。 -->
            <u-image :src="item.goods_small_logo||src"               width="191"
            height="191"></u-image>
        </view>
        <view class="goods-info">
            <view class="goods-name">{{item.goods_name}}</view>
            <view class="goods-price">￥{{item.goods_price}}</view>
        </view>
    </navigator>
</view>
</view>

<view v-if="current===1"></view>

<view v-if="current===2"></view>
</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: '综合'
				}, {
					name: '销量'
				}, {
					name: '价格',
				}],
				current: 0,
                goods:[],
                total:0,
                // 默认图片
                 src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.2qqtouxiang.com%2Fpic%2FTX9669_01.jpg&refer=http%3A%2F%2Fimg.2qqtouxiang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648372748&t=bdad7fa9a3908defe372556a009ae987",
			}
		},
		 methods: {
    change(index) {
      this.current = index;
    },

    // 获取商品列表数据
    async getgoodsList() {
      const res = await this.$u.http.get("/goods/search", this.params);
      // console.log(res);
      // 获取要渲染的数据  数组合并
      this.goods = [...this.goods, ...res.goods];
      // 获取数据总条数
      this.total = res.total;
    },
  },
     onLoad(options){
          console.log(options);
          const { cid } = options
         // 定义 接口要的参数
          this.params = {
           // 否	string	关键字
           query: "",
           // 否	string	分类id
           cid: cid,
           // 否	number	页码
           pagenum: 1,
           // 否	number	页容量
           pagesize: 20,
         };

           // 发送请求获取数据
          this.getgoodsList()
        },
            // 上拉加载
        onReachBottom(){
                //console.log("没有下一页了");
                // 判断 :当加载的数组长度大于后台返回的数据,就说明已没有下一页数据
                if(this.goods.length >= this.total){
                  uni.showToast({
                      title:'没有下一页数据了',
                      icon:'none',
                  })
                  return
                }
                console.log("还有下一页的数据");
                // 页码加1
                this.params.pagenum++;
                // 发送请求获取数据
                this.getgoodsList();

            },
           // 下拉刷新
        onPullDownRefresh() {
         // 数据重置
         this.goods=[]
         this.params.pagenum=1
         // 发送请求获取数据
          this.getgoodsList()
        // 关闭
        　uni.stopPullDownRefresh() //停止下拉刷新
          uni.showToast({
                      title:'刷新成功',
                      icon:'none',
                  })
	    }
    }
</script>
<style lang="scss">
    .goodList{
        padding-top: 100rpx;
    }
    .goods-item{
        display: flex;
        padding: 20rpx 0;
        border-bottom: 1px solid #ccc;
        .goods-image{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .goods-info{
            flex:2;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .goods-price{
                color: $theme-color;
            }
        }
    }
</style>